import useDeviceType from '@base/hooks/useDeviceType';
import MobileNavigation from './MobileNavigation';
import PCNavigation from './PCNavigation';
import useCategoryData from '@domain/category/hooks/useCategoryData';
import { useEffect, useState } from 'react';

export type CategoryType = {
    id?: string;
    name?: string;
    col?: number;
    urlname?: string;
};

export interface NavigationProps {
    categorys?: CategoryType[];
}

const Navigation: React.FC = () => {
    // 判断是否为移动设备
    const { isMobile } = useDeviceType();

    // 获取分类数据
    const { data } = useCategoryData();

    // 由于返回的分类数据中只有具体的分类，因此这里手动添加一个全部项
    const [categorys, setCategorys] = useState<CategoryType[]>([]);

    useEffect(() => {
        if (data) {
            setCategorys([
                { id: 'all', name: '全部' },
                ...data.categorys,
            ])
        }
    }, [data])

    return (
        <div>
            {isMobile ? (
                <MobileNavigation categorys={categorys} />
            ) : (
                <PCNavigation {...data} />
            )}
        </div>
    );
};

export default Navigation;
